<template>
	<Modal
		ref 		= 'modalRef' 
		:title 		= 'title' 
		@ok 		= 'onOk' 
		@close 		= 'onClose' 
		:width 		= 'modalConfig.width'
		:height 	= 'modalConfig.height'
		:loading 	= 'ajax.loading'
		:scroll 	= 'modalConfig.scroll'
		:controls 	= 'modalConfig.controls'
		:bodyStyle  = 'modalConfig.bodyStyle'
		:destroy  	= "modalConfig.destroy === false ? false : true"
	>
		<SubmitForm 
			ref 			= 'formRef'
			:data 			= 'modalConfig.data'
			:api 			= 'modalConfig.api'
			:config 		= '{...modalConfig, width:modalConfig.itemWidth }'
			:loading 		= 'ajax.loading'
			:isSubmitForm 	= 'false'
			@submit 		= 'onSubmit'
			@init 			= 'onInit'
			:controls 		= 'false'
		>
			<slot></slot>
		</SubmitForm>
	</Modal>
</template>

<script setup>
	import { watch } from 'vue'
	import SubmitForm from '#cpt/form/submit-form.vue'
	/* --------------------------- Component --------------------------- */
	const Modal 		= $.lazy(()=>import('@antd/modal.vue'))
	/* --------------------------- props --------------------------- */
	const props = defineProps({
		data 	 	: { type:Array, default: [] },
		config   	: { type:Object, default: {} },
		loading  	: Boolean,
		title 	 	: String
	})
	const { config, table }  = props
	/* --------------------------- 两种传值方式 --------------------------- */	// const getValue = name => config[name] ? config[name] : props[name]
	// const setFn = name => config[name] ? config[name] : ()=>{}
	/* --------------------------- ref --------------------------- */
	let modalRef = $ref()
	let formRef = $ref()
	let detailListRef = $ref()
	let ajax = $ref({})
	let modalConfig = $ref(config)
	let title = $ref(modalConfig.title)
	/* --------------------------- emit --------------------------- */
	const emit = defineEmits(['ok','init'])
	const onOk = () => {
		const param = { param: formRef.getValue(), formRef, modalRef, close: modalRef.close }
		const { onOk } = modalConfig
		
		if(onOk){
			const bool = onOk(param)
			if( bool !== false){
				modalRef.close()
			}
		}else{
			formRef.submit()
			return false
		}
	}
	
	const onClose = () => modalConfig?.onClose?.()
	
	const onSubmit = ({ param }) => formRef.SubmitUtils({ ajax, param, submitConfig:modalConfig, formRef, title, modalRef })
	
	/* --------------------------- 初始化 --------------------------- */
	// watch(()=> modalConfig.title, value => title = value)
	/* --------------------------- 初始化 --------------------------- */
	const onInit = value => {
		const p = { ...value, modalRef, formRef }
		emit('init', p)
		modalConfig?.onInit?.( p )
	}
	/* --------------------------- 通信 --------------------------- */
	defineExpose({
		open: async value => {
			modalRef.open()
			if( value ){ modalConfig = value }
		
			let {
				// 添加与编辑
				mode, 							/** @param {String}				# 按钮模式 */
				tableRef,
				label=$config?.btnName?.[mode], /** @param {String}				# 按钮名称 */
				addTitle, 						/** @param {String}				# 添加时的标题 */
				modTitle, 						/** @param {String}				# 编辑时的标题 */
				onAdd, 							/** @param {Event}				# 添加时执行 */
				onMod, 							/** @param {Event}				# 编辑时执行 */
				id, 							/** @param {String}				# id 值 */
				bidStr=$config.pullIdName, 		/** @param {String}				# 回显 id */
				sidStr=$config.postIdName, 		/** @param {String}				# 提交 id 的参数名 */
				// 回显
				infoApi, 						/** @param {String}				# 回显 api */
				backInfo, 						/** @param {Object, Function}	# 回显本地数据 */
				onBackData,						/** @param {Function}			# 自定义回显 */
				backData, 						/** @param {Object, Function}	# 自定义回显 */
				// 流程函数
				onStart, 						/** @param {Function}			# 开始 */
				onEnd, 							/** @param {Function}			# 结束 */
				//
				param,							/** @param {Object}				# 提交参数 */
				backParam,						/** @param {Object}				# 回显参数 */
				abs, 							/** @param {Boolean}			# 回显参数是否是绝对参数 */
			} = modalConfig
			
			title = modalConfig.title
			
			const start = await onStart?.() 				// 在操作之前运行
			
			const sendParam = { config:modalConfig, formRef, modalRef, tableRef, start }
			
			id = $fn.getResult(id)					// 必选参数 id
			param =  $fn.getResult(param)			// 提交参数
			backParam = $fn.getResult(backParam)	// 回显参数
			
			if(mode === 'add'){
				await onAdd?.(sendParam)
				ajax.ids = null
				title = addTitle ? addTitle :  title ? (title + ' - ' + label) : label
			}else if( mode === 'mod'){
				title = modTitle ? modTitle : title ? (title + ' - ' + label) : label
				await onMod?.(sendParam)
				ajax.ids ={ [sidStr]: id }
			}else{
				ajax.ids = null
				title = title ?? label
			}
			// 接口回显
			if( backInfo ){ 
				backInfo = $fn.getResult(backInfo, sendParam)
				return formRef?.setBackValue?.( backInfo )
			}
			if( infoApi ){
				if( !abs ){ backParam = { [bidStr]: id, ...backParam } }
				id = backParam ? null : id
				
				await $http.pull(ajax, infoApi, { id, param:backParam }).then(data=>{
					const p = {...sendParam, id, param, backParam, data }
					if( onBackData ){
						onBackData?.( p )
					}else{
						backData = $fn.getResult(backData, p)
						formRef?.setBackValue?.({...data,...backData})
					}
					onEnd?.(p)
				})
			}else{
				// 本地数据回显
				backData ? formRef?.setBackValue?.( $fn.getResult(backData, sendParam) ) : onBackData?.(sendParam)
				onEnd?.(sendParam)
			}
		},
		submit: () => formRef.submit(),
		close: () => modalRef.close(),
		modalRef: () => modalRef,
		formRef: () => formRef
	})
</script>